<template>
  <div>
    <el-container>
      <el-header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          style="width:1280px;position: relative;
  left: -20px;"
        >
          <el-menu-item index="/index_manager/costhead/water">水费录入</el-menu-item>
          <el-menu-item index="/index_manager/costhead/ele">电费录入</el-menu-item>
          <el-menu-item index="/index_manager/costhead/gas">燃气费录入</el-menu-item>

          <div class="xiazai">
            <el-button type="primary" @click="water">水费模板</el-button>
            <el-button type="primary" @click="ele">电费模板</el-button>
            <el-button type="primary" @click="gas">燃气费模板</el-button>
          </div>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      activeIndex: "/index_manager/costhead/water"
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push(key);
      console.log(key, keyPath);
    },
    water() {
      this.axios
        .get("excel/getwater", { responseType: 'blob' })
        .then(function(response) {
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "水费模板.xlsx"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象

          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
      console.log("water");
    },
   ele() {
     this.axios
        .get("excel/getele", { responseType: 'blob' })
        .then(function(response) {
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "电费模板.xlsx"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象

          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
      console.log("ele");
    },
    gas() {
      this.axios
        .get("excel/getgas", { responseType: 'blob' })
        .then(function(response) {
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "燃气费模板.xlsx"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象

          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
      console.log("gas");
    }
  },
  components: {}
};
</script>

<style scope>
.xiazai{
  position: absolute;
  right: 20px;
}
</style>
